<template>
	<!-- 绩效作业时长 -->
	<cardTemplate :loading="loading" :opt="cardSetting" title="作业工单" @filterFun="getFilterFun" :setTime="filter"
		name="achievements_workOrder">
		<view class="card-content">
			<view class="chart-block" v-if="filter.type == 1 && implementOpt.hasData">

				<l-echart class="ring" ref="implementOpt"></l-echart>
			</view>
			<view class="chart-total" v-if="filter.type == 1 && implementOpt.hasData">
				<view class="chart-total-count">
					作业工单总数:
					<text>{{ implementOpt.count }}单</text>
				</view>
				<view class="chart-total-detail">
					<view @click="toMaintenanceList" v-if="memberList.length > 0 || userList.length > 1">
						详情
						<image src="@/static/images/right.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="title-d" v-if="filter.type == 1 && implementOpt.hasData">作业工单明细</view>
			<!-- 个人 趋势 按日 -->
			<view v-if="filter.type == 2 && userList.length <= 1" class="date-type special"
				@click="showSPicker('implementOpt')">
				{{ dateTypes[implementOpt.dateType] }}
				<image src="@/static/images/down.png" mode=""></image>
			</view>

			<view :class="['data-types', filter.type == 2 ? 'border' : '']" v-if="userList.length && userList.length > 1">
				<sTabs v-if="filter.type == 1 && memberList.length > 1" @change="changeTab('implementOpt', $event)"
					:list="typeList" :idx="implementOpt.typeIdx"></sTabs>
				<sTabs v-if="filter.type == 2" @change="changeLineType('implementOpt', $event)" :list="groupList"
					:idx="implementOpt.lineType"></sTabs>

				<view class="key-setting" v-if="userList.length > 1 && filter.type == 1 && implementOpt.hasData"
					@click="showKeysSelect('implementOpt')">
					<uni-icons type="gear" style="margin-right: 4rpx;"></uni-icons>
					指标设置
				</view>
				<view class="data-types-right" v-if="filter.type == 2 && userList.length > 1">
					<view class="mbs-type" v-if="implementOpt.lineType" @click="changeMbs('implementOpt')">
						<image src="@/static/images/chart.png" mode=""></image>
						对比名单
					</view>
					<view class="date-type" @click="showSPicker('implementOpt')">
						{{ dateTypes[implementOpt.dateType] }}
						<image src="@/static/images/down.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 折线图趋势对比类型 -->
			<scroll-view scroll-x="true" style="width: 100%;white-space: nowrap;">
				<view class="tag-block" v-if="filter.type == 2 && userList.length > 1 && implementOpt.lineType">
					<view @click="changeLineTag('implementOpt', index)"
						:class="['tag-block-item', implementOpt.tagIdx === index ? 'act' : '']"
						v-for="(item, index) in implementOpt.tags" :key="item.key">
						{{ item.name }}
					</view>
				</view>
			</scroll-view>
			<!-- 折线图趋势对比类型 end -->

			<defaultBlock :text="'- 暂无相关数据 -'" v-if="!implementOpt.hasData"></defaultBlock>

			<!-- 作业工单表格 -->
			<s-table :headers="implementOpt.userHead" :dataList="implementOpt.chartData.series"
				v-if="filter.type == 1 && userList.length == 1 && implementOpt.hasData"
				@toContractDetail="toMemberDetail($event)"></s-table>
			<s-table :totals="implementOpt.totals" :title="title" :dataList="implementOpt.groupRecords"
				@toContractDetail="toContractDetail($event, implementOpt.typeIdx)"
				:headers="implementOpt.typeIdx == 1 ? implementOpt.leaderHeadUser : implementOpt.leaderHead"
				v-if="filter.type == 1 && userList.length && userList.length > 1 && implementOpt.hasData"></s-table>

			<view class="line-chart" v-if="filter.type == 2 && implementOpt.hasData">

				<l-echart class="line" ref="implementLineChart"></l-echart>
			</view>
		</view>

		<sPicker ref="sPicker" @change="changeDateType"></sPicker>
		<tagSelect ref="tagSelect" @success="changeTags"></tagSelect>
		<memberSelect v-if="memberList.length" :members="memberList" ref="memberSelect" @success="changeMbsFuc">
		</memberSelect>
	</cardTemplate>
</template>

<script>
import * as echarts from '@/subpages/components/lime-echart/static/echarts.min';
import LEchart from '@/subpages/components/lime-echart/components/l-echart/l-echart.vue';
import {
	setLineOpt,
	setRingOpt,
	onelineOpt
} from './chartSet.js';
import {
	getLastDates
} from '@/utils/tools.js';
import cardTemplate from '../components/card-template/card-template.vue';
import memberSelect from '../components/member-select.vue';
import defaultBlock from '../components/default.vue';
import tagSelect from '../components/tag-select.vue';
import sTable from '../../components/s-table/s-table.vue';
import sPicker from '../../components/s-picker/s-picker.vue';
import sTabs from '../components/tabs.vue';
import {
	getOrderPie,
	getOrderDetailGroup,
	getOrderDetailUser,
	getOrderLineData,
	getOrderLineDataGroup,
	getOrderLineDataUser
} from '@/apis/statistic.js';
export default {
	name: 'achievements_workOrder',
	components: {
		LEchart,
		cardTemplate,
		memberSelect,
		tagSelect,
		defaultBlock,
		sTable,
		sPicker,
		sTabs
	},
	props: {
		pageScrollTop: {
			type: [Number, String],

			default: 0
		},
		groupId: [String, String],
		memberList: {
			type: Array,
			default: () => []
		},
		userList: {
			type: Array,
			default: () => []
		},
		childDeep: {
			type: [Number, String],
			default: 0
		},
		toDeepCheckedDate: {
			type: Object,
			default: () => { }
		},
		workTimeDeep: {
			type: Object,
			default: () => { }
		},
		chooseIndex: {
			type: [Number, String],
			default: 0
		},
	},
	watch: {
		userList(val) {
			if (val) {
				// 数据下传
				uni.getStorage({
					key: 'statistical' + (this.childDeep ? this.childDeep : ''),
					success: res => {
						if (res.data.workOrderDeep) {
							this.initData(res.data.workOrderDeep);
							return;
						}
					}
				});
				this.initData();
			}
		},
		toDeepCheckedDate(val) {
			if (val) {
				this.checkedDate = val;
			}
		}
	},
	data() {
		return {
			year: '',
			endTime: '', // 截至时间
			month: '',
			workerOrders: [],
			checkedDate: {},
			filter: {
				type: 1, // 统计类型 1数量，2趋势
				dateType: 2, // 日期范围 1今天，2近七天，3近30天，4自定义日期
				startTime: '',
				endTime: ''
			},
			groupRecords: [], // 组明细
			userRecords: [], // 人明细
			title: '',
			loading: true,
			dateTypes: ['按日', '按周', '按月'],
			typeList: ['按组', '按人'],
			typeListOther: ['合计', '保养', '维修', '配件'],
			choosedHeadUserList: [],
			choosedHeadList: [],
			groupList: ['整体趋势', '趋势对比'],

			implementOpt: {
				opts: {},
				lineOpt: {},

				hasData: true,
				typeIdx: 0, // 0按组 1按人
				dateType: 0,
				type: 1, // 1按组统计，2按人统计
				lineType: 0, // 0整体趋势 1趋势对比
				tagIdx: 0,
				lineTypeGroup: [], // 选中的组
				lineTypeMbs: [], // 选中的人
				totals: {},
				tags: [{
					name: '合计作业工单',
					key: 'statusDisable',
					unit: '单'
				},
				{
					name: '保养作业工单',
					key: 'statusProcessed',
					unit: '单'
				},
				{
					name: '维修作业工单',
					key: 'statusFinish',
					unit: '单'
				},
				{
					name: '配件作业工单',
					key: 'statusSign',
					unit: '单'
				}
				],
				count: 0,
				userHead: [{
					name: '作业类型', // 表头名称
					sort: false, // 是否开启该列的排序功能
					width: 210, // 列宽
					checked: true,
					key: 'name', // 显示哪个字段
					unit: '' // 单位
				},
				{
					name: '作业工单数量',
					sort: false,
					checked: true,
					width: 220,
					key: 'data'
				},
				{
					name: '占比',
					sort: false,
					width: 235,
					checked: true,
					key: 'ratio',
					unit: '%'
				}
				],
				leaderHeadUser: [{
					name: '名称', // 表头名称
					sort: false, // 是否开启该列的排序功能
					checked: true,
					width: 210, // 列宽
					key: 'name', // 显示哪个字段
					unit: '' // 单位
				},
				{
					name: '合计作业工单数',
					sort: true,
					checked: true,
					width: 164,
					key: 'allCount'
				},
				{
					name: '保养作业工单数',
					sort: true,
					checked: true,
					width: 164,
					key: 'byOrderCount'
				},
				{
					name: '保养作业工单占比',
					sort: true,
					checked: true,
					width: 164,
					key: 'byPercentage',
					fixed: 1,
					unit: '%'
				},
				{
					name: '维修作业工单数',
					sort: true,
					checked: true,
					width: 164,
					key: 'wxOrderCount'
				},
				{
					name: '维修作业工单占比',
					sort: true,
					checked: true,
					width: 164,
					key: 'wxPercentage',
					fixed: 1,
					unit: '%'
				},
				{
					name: '配件作业工单数',
					sort: true,
					checked: true,
					width: 164,
					key: 'pjOrderCount'
				},
				{
					name: '配件作业工单占比',
					sort: true,
					checked: true,
					width: 164,
					fixed: 1,
					key: 'pjPercentage',
					unit: '%'
				}
				],
				leaderHead: [{
					name: '名称', // 表头名称
					sort: false, // 是否开启该列的排序功能
					checked: true,
					width: 210, // 列宽
					key: 'name', // 显示哪个字段
					unit: '' // 单位
				},
				{
					name: '合计作业工单数',
					sort: true,
					checked: true,
					width: 164,
					key: 'allCount'
				},
				{
					name: '保养作业工单数',
					sort: true,
					checked: true,
					width: 164,
					key: 'byOrderCount'
				},
				{
					name: '保养作业工单占比',
					sort: true,
					checked: true,
					width: 164,
					fixed: 1,
					key: 'byPercentage',
					unit: '%'
				},
				{
					name: '维修作业工单数',
					sort: true,
					checked: true,
					width: 164,
					key: 'wxOrderCount'
				},
				{
					name: '维修作业工单占比',
					sort: true,
					checked: true,
					width: 164,
					fixed: 1,
					key: 'wxPercentage',
					unit: '%'
				},
				{
					name: '配件作业工单数',
					sort: true,
					checked: true,
					width: 164,
					key: 'pjOrderCount'
				},
				{
					name: '配件作业工单占比',
					sort: true,
					checked: true,
					fixed: 1,
					width: 164,
					key: 'pjPercentage',
					unit: '%'
				}
				],
				linedata: {
					categories: [],
					series: []
				},
				// 保养执行配置
				chartData: {
					series: []
				},

				groupRecords: [], // 组明细
				userRecords: [] // 人明细
			}
		};
	},
	methods: {
		setRingChart(chart) {  // 绘制环形图
			let list = this[chart].chartData.series;
			let chartData = [];
			for (let i = 0; i < list.length; i++) {
				chartData.push({
					value: list[i].ratio, name: list[i].name
				});
			}
			this[chart].opts = setRingOpt({ color: this[chart].colors, data: chartData });
			this.$nextTick(() => {
				this.$refs[chart].init(echarts, chartF => {
					// this.chartMaps[chart] = chartF 
					chartF.setOption(this[chart].opts);

					chartF.dispatchAction({
						type: 'highlight',
						seriesIndex: 0,
						dataIndex: 0
					});
					chartF.on('legendselectchanged', (e) => { 
						chartF.dispatchAction({ type: 'downplay', seriesIndex: 0 }); // 处理图例点击导致选中与默认选中重叠问题
					});
					chartF.on('mouseover', (e) => {
						if (e.dataIndex !== 0) { // 当鼠标移除的时候 使默认的索引值去除默认选中
							chartF.dispatchAction({ type: 'downplay', dataIndex: 0 });
						}
					});
				});
			});
		},

		// 修改筛选条件
		getFilterFun(res) { 
			if (res.applyToAll) {
				this.$emit('applyToAll', res);
			}
			this.$emit('setToDeepPage', res);
			this.filter = res;
			this.initData();
		},
		// 自定义表格字段
		changeTags(res) {
			this[res.key][this[res.key].typeIdx == 1 ? 'leaderHeadUser' : 'leaderHead'] = res.tags;
			// this.$forceUpdate()
		},
		// 表格点击事件
		toContractDetail(res, typdIdx) {
			const {
				item,
				key
			} = res; 
			if (key == 'name' && this.memberList.length) {
				if (!this.memberList.length) {
					return;
				}
				// 数据下转
				let list = [];
				let groupId = '';
				if (this.memberList.length == 1) {
					list = this.memberList[0].children;
					groupId = this.memberList[0].id;
				} else {
					list = this.memberList;
				}
				if (typdIdx == 1 && this.memberList.length > 1) {
					// 按人对比 查询子集维保员
					for (let i = 0; i < list.length; i++) {
						for (let j = 0; j < list[i].children.length; j++) {
							if (list[i].children[j].name == item.name) {
								const storage = {
									groupId: this.groupId,
									id: list[i].children[j].id,
									title: item.name
								};
								this.toDeepPage(storage);
								return;
							}
						}
					}
				} else { 
					for (let i = 0; i < list.length; i++) {
						if (list[i].name == item.name) {
							if (list[i].type == 2) {
								// 人单位
								const storage = {
									groupId: groupId,
									id: list[i].id,
									title: item.name
								};
								this.toDeepPage(storage);
							} else {
								// 组单位
								groupId = list[i].id;
								let ids = [];
								list[i].children.forEach(item => {
									ids.push(item.id);
								});
								const storage = {
									groupId: groupId,
									id: ids.join(','),
									groupList: [list[i]],
									title: item.name
								};
								this.toDeepPage(storage);
							}
							return;
						}
					}
				}
			}
		},
		// 数据下转
		toDeepPage(data) {
			if (this.workTimeDeep) {
				data.workTimeDeep = this.workTimeDeep;
			} else {
				data.workTimeDeep = uni.getStorageSync('statistical' + (this.childDeep ? this.childDeep : '')).workTimeDeep;
			}
			data.chooseIndex = this.chooseIndex;
			data.workOrderDeep = this.filter;
			data.checkedDate = this.checkedDate;
			uni.setStorage({
				key: 'statistical' + (Number(this.childDeep || 0) + 1),
				data: data,
				success: (res) => {
					uni.navigateTo({
						url: `./statistical?tabIdx=4&childDeep=${Number(this.childDeep || 0) + 1}`
					});
				},
				fail: (err) => {
					console.log(err);
				}
			});
		},
		toMaintenanceList(k, tabIdx) {
			const data = {
				userList: this.userList,
				filter: JSON.parse(JSON.stringify(this.filter))
			};
			if (k == 1) {
				const checkedDate = this.checkedDate;
				let time =
					checkedDate.year +
					'-' +
					(checkedDate.month > 9 ? checkedDate.month : '0' + checkedDate.month) +
					'-' +
					(checkedDate.day > 9 ? checkedDate.day : '0' + checkedDate.day);
				data.filter.startTime = time;
				data.filter.endTime = time;
				data.filter.dateType = 4;
			} else { }
			uni.setStorage({
				data: data,
				key: 'recordFilter',
				success: () => {
					if (tabIdx) {
						uni.navigateTo({
							url: '/subpages/statistics/orderList?tabIdx=' + tabIdx
						});
					} else {
						uni.navigateTo({
							url: '/subpages/statistics/orderList'
						});
					}
				}
			});
		},
		formatterCenter(res) {
			let {
				ratio,
				name
			} = res;
			// console.log('formatterCenter', ratio, name);
			if (name && name.indexOf('分钟') != -1) {
				let arr = name.split('(');
				name = arr[0];
			}
			return {
				title: res.ratio + '%',
				subtitle: name
			};
		},
		initData(data) {
			if (data) {
				if (data.applyToAll) {
					this.filter.dateType = data.dateType;
					this.filter.startTime = data.startTime;
					this.filter.endTime = data.endTime;
				} else {
					this.filter = data;
				}
			}
			if (this.memberList.length <= 1) {
				this.implementOpt.typeIdx = 1;
			} 
			if (!this.filter.startTime) {
				const dates = getLastDates(7);
				this.filter.startTime = dates.startTime;
				this.filter.endTime = dates.endTime;
			}
			if (this.filter.type == 2) {
				this.loadOrderChartData();
			} else {
				this.loadOrderPie();
				this.loadOrderDetail();
			}
		},
		// 切换某个卡片的按组或人类型
		changeTab(key, idx) {
			this[key].typeIdx = idx;
			this.loadOrderDetail();
		},
		// 修改某个图表日月周
		changeDateType(res) {
			console.log('修改某个图表日月周', res);
			this[res.keyval].dateType = res.value;

			// 整体趋势
			this.loadOrderChartData();
		},
		// 个人版表格点击
		toMemberDetail(event, k) {
			const map = {
				保养作业工单: 0,
				维修作业工单: 1,
				配件作业工单: 2
			};
			let idx = map[event.item.name];
			this.toMaintenanceList(k, idx);
		},
		// 自定义按组按人趋势对比
		changeMbsFuc(res) {
			console.log('自定义按组按人趋势对比', res);
			this[res.key].type = res.type;
			if (res.type == 1) {
				this[res.key].lineTypeGroup = JSON.parse(JSON.stringify(res.acts));
			}
			if (res.type == 2) {
				this[res.key].lineTypeMbs = JSON.parse(JSON.stringify(res.acts));
			}
			// 整体趋势
			this.loadOrderChartData();
		},
		// 切换某个图表的整体趋势或趋势对比
		changeLineType(key, idx) {
			console.log('切换某个图表的整体趋势或趋势对比', key, idx);
			this[key].lineType = idx;
			if (idx == 0) {
				// 整体趋势
			}
			if (idx == 1) {
				// 趋势对比
				if (this.memberList.length == 1) {
					// 如果没有下级组
					this[key].type = 2; // 只能按人对比
				}
				if (this[key].type == 1) {
					// 按组对比，设置默认组数据
					if (this[key].lineTypeGroup.length) {
						// 检查是否有已选数据
					} else {
						let groups = [];
						for (let i = 0; i < this.memberList.length; i++) {
							groups.push(this.memberList[i].id);
						}
						if (groups.length > 3) {
							groups = groups.slice(0, 3);
						}
						this[key].lineTypeGroup = groups;
					}
				} else {
					// 按人对比，设置人默认数据
					if (this[key].lineTypeMbs.length) {
						// 检查是否有已选数据
					} else {
						let mbs = JSON.parse(JSON.stringify(this.userList));
						if (mbs.length > 3) {
							mbs = mbs.slice(0, 3);
						}
						this[key].lineTypeMbs = mbs;
					}
				}
			}
			this.loadOrderChartData();
		},

		// 截取日期前几位
		changeDateVal(list) {
			if (!list || list.length == 0) {
				return [];
			}
			let relist = [];
			for (let i = 0; i < list.length; i++) {
				let date = list[i];
				if (date.indexOf('月') != -1) {
					relist.push(date);
				} else {
					if (date.indexOf('~') != -1) {
						// 按周
						let arr = date.split('~');
						try {
							relist.push(arr[0].slice(5) + '~' + arr[1].slice(5));
						} catch (e) {
							// TODO handle the exception
							relist.push('');
						}
					} else {
						relist.push(date.slice(5));
					}
				}
			}
			return relist;
		},

		// 加载工单折线图
		loadOrderChartData() {
			console.log('加载作业时长折线图');
			if (this.implementOpt.lineType == 0 || !this.memberList.length) {
				// 整体趋势
				getOrderLineData({
					beginDate: this.filter.startTime,
					endDate: this.filter.endTime,
					userIds: this.userList,
					dimension: this.implementOpt.dateType
				}).then(res => {
					let list = res.data || [];

					const linedata = {
						categories: [],
						series: [
							{
								name: '保养作业工单',
								unit: '单',
								data: []
							},
							{
								name: '维修作业工单',
								unit: '单',
								data: []
							},
							{
								name: '配件作业工单',
								unit: '单',
								data: []
							},
						]
					};
					let hasdata = false;
					if (list.length) {
						linedata.categories = Object.keys(list[0].trendData);
						for (let i = 0; i < list.length; i++) {
							if (list[i].type == 4) {
								for (let j = 0; j < linedata.categories.length; j++) {
									if (list[i].trendData[linedata.categories[j]] > 0) {
										hasdata = true;
									}
									linedata.series[2].data.push(list[i].trendData[linedata.categories[j]]);
								}
							}
							if (list[i].type == 2) {
								for (let j = 0; j < linedata.categories.length; j++) {
									if (list[i].trendData[linedata.categories[j]] > 0) {
										hasdata = true;
									}
									linedata.series[1].data.push(list[i].trendData[linedata.categories[j]]);
								}
							}
							if (list[i].type == 1) {
								for (let j = 0; j < linedata.categories.length; j++) {
									if (list[i].trendData[linedata.categories[j]] > 0) {
										hasdata = true;
									}
									linedata.series[0].data.push(list[i].trendData[linedata.categories[j]]);
								}
							}
						}
					}
					let dataLength = 0;
					for (let i = 0; i < linedata.series.length; i++) {
						if (linedata.series[i].data.length) {
							dataLength = linedata.series[i].data.length;
							break;
						}
					}
					if (dataLength) {
						for (let i = 0; i < linedata.series.length; i++) {
							if (linedata.series[i].data.length == 0) {
								for (let j = 0; j < dataLength; j++) {
									linedata.series[i].data.push(0);
								}
							}
						}
					} 
					// linedata.categories = this.changeDateVal(linedata.categories);
					this.implementOpt.linedata = linedata;
					this.implementOpt.hasData = hasdata;
					if (hasdata) {
						this.setLineChart('implementOpt');
					}
				});
			} else { 
				if (this.implementOpt.type == 1) { 
					// 按组统计
					let arr = [];
					for (var i = 0; i < this.memberList.length; i++) {
						if (this.implementOpt.lineTypeGroup.indexOf(this.memberList[i].id) != -1) {
							const item = {
								deptId: this.memberList[i].id,
								deptName: this.memberList[i].name,
								userIds: []
							};
							for (var j = 0; j < this.memberList[i].children.length; j++) {
								item.userIds.push(this.memberList[i].children[j].id);
							}
							arr.push(item);
						}
					}
					getOrderLineDataGroup({
						beginDate: this.filter.startTime,
						endDate: this.filter.endTime,
						deptGroups: arr,
						dimension: this.implementOpt.dateType,
						type: this.implementOpt.tagIdx == 3 ? 4 : this.implementOpt.tagIdx
					}).then(res => {
						let list = res.data || [];
						const linedata = {
							categories: [],
							series: []
						};
						let hasdata = false;
						if (list.length) {
							linedata.categories = Object.keys(list[0].trendData);
							for (let i = 0; i < list.length; i++) {
								const item = {
									name: list[i].type,
									unit: '单',
									data: []
								};
								for (let j = 0; j < linedata.categories.length; j++) {
									if (list[i].trendData[linedata.categories[j]] > 0) {
										hasdata = true;
									}
									item.data.push(list[i].trendData[linedata.categories[j]]);
								}
								linedata.series.push(item);
							}
						}
						// linedata.categories = this.changeDateVal(linedata.categories);
						this.implementOpt.linedata = linedata;
						this.implementOpt.hasData = hasdata;
						if (hasdata) {
							this.setLineChart('implementOpt');
						} 
					});
				} else {
					getOrderLineDataUser({
						beginDate: this.filter.startTime,
						endDate: this.filter.endTime,
						userIds: this.implementOpt.lineTypeMbs,
						dimension: this.implementOpt.dateType,
						type: this.implementOpt.tagIdx == 3 ? 4 : this.implementOpt.tagIdx
					}).then(res => {
						let list = res.data || [];

						const linedata = {
							categories: [],
							series: []
						};
						let hasdata = false;
						if (list.length) {
							linedata.categories = Object.keys(list[0].trendData);
							for (let i = 0; i < list.length; i++) {
								const item = {
									name: list[i].type,
									unit: '单',
									data: []
								};
								for (let j = 0; j < linedata.categories.length; j++) {
									if (list[i].trendData[linedata.categories[j]] > 0) {
										hasdata = true;
									}
									item.data.push(list[i].trendData[linedata.categories[j]]);
								}
								linedata.series.push(item);
							}
						}
						// linedata.categories = this.changeDateVal(linedata.categories);
						this.implementOpt.linedata = linedata;
						this.implementOpt.hasData = hasdata;
						if (hasdata) {
							this.setLineChart('implementOpt');
						} 
					});
				}
			}
		},
		// 绘制趋势折现图
		setLineChart(chart) {  // 绘制环形图
			let list = this[chart].linedata.series;
			let chartData = [];
			for (let i = 0; i < list.length; i++) {
				let seriesItem = {
					name: list[i].name,
					type: 'line',
					showSymbol:list[i].data.length <= 1 ? true : false,
					smooth: true,
					emphasis: {
						focus: 'none'
					},
					data: list[i].data
				};
				if (this[chart].lineType) {
					// 趋势对比
				} else {
					// 整体
					seriesItem.areaStyle = { opacity: 0.2 };
					seriesItem.stack = 'Total';
				}

				chartData.push(seriesItem);
			} 
		
			this[chart].lineOpts = onelineOpt({ unit: '单', data: chartData, categories: this[chart].linedata.categories });
			this.$nextTick(() => {
				this.$refs['implementLineChart'].init(echarts, chartF => {
					// this.chartMaps[chart] = chartF 
					chartF.setOption(this[chart].lineOpts);
				});
			});
		},
		// 加载作业工单时长数据统计
		loadOrderDetail() {
			// 组长
			if (this.implementOpt.typeIdx == 0) {
				// 组模式
				let arr = [{
					deptId: -1,
					deptName: '全部',
					userIds: this.userList
				}];
				for (var i = 0; i < this.memberList.length; i++) {
					const item = {
						deptId: this.memberList[i].id,
						deptName: this.memberList[i].name,
						userIds: []
					};
					for (var j = 0; j < this.memberList[i].children.length; j++) {
						item.userIds.push(this.memberList[i].children[j].id);
					}
					arr.push(item);
				}
				// 按组
				getOrderDetailGroup({
					beginDate: this.filter.startTime,
					endDate: this.filter.endTime,
					deptGroups: arr
				}).then(res => {
					this.loading = false;
					const list = res.data;
					if (list.length) {
						for (var i = 0; i < list.length; i++) {
							// list[i].name = list[i].deptName;
							list[i].byPercentage = list[i].byPercentage * 100;
							list[i].pjPercentage = list[i].pjPercentage * 100;
							list[i].wxPercentage = list[i].wxPercentage * 100;
							list[i].allCount = Number(list[i].byOrderCount || 0) + Number(list[i]
								.wxOrderCount || 0) + Number(list[i].pjOrderCount || 0);
						}
						this.setGeoupData(list, 'implementOpt');
					} else {
						this.implementOpt.totals = {};
						this.implementOpt.groupRecords = [];
					}
				});
			} else {
				// 按人
				if (!this.userList.length) {
					return;
				}
				getOrderDetailUser({
					beginDate: this.filter.startTime,
					endDate: this.filter.endTime,
					userIds: this.userList
				}).then(res => {
					this.loading = false;
					const arr = res.data;
					let list = [];
					if (arr.length) {
						for (var i = 0; i < arr.length; i++) {
							// list[i].name = list[i].userName;
							arr[i].byPercentage = arr[i].byPercentage * 100;
							arr[i].pjPercentage = arr[i].pjPercentage * 100;
							arr[i].wxPercentage = arr[i].wxPercentage * 100;
							arr[i].allCount = Number(arr[i].byOrderCount || 0) + Number(arr[i].wxOrderCount ||
								0) + Number(arr[i].pjOrderCount || 0);

							if (arr[i].name == '全部') {
								this.implementOpt.totals = arr[i];
							} else {
								list.push(arr[i]);
							}
						}
						this.implementOpt.groupRecords = list;
					} else {
						this.implementOpt.totals = {};
						this.implementOpt.groupRecords = [];
					}
				});
			}
		},
		// 加载作业工单环形图
		loadOrderPie() {
			getOrderPie({
				beginDate: this.filter.startTime,
				endDate: this.filter.endTime,
				userIds: this.userList
			}).then(res => {
				const arr = [
					{
						name: '保养作业工单',
						data: 0,
						ratio: 0
					},
					{
						name: '维修作业工单',
						data: 0,
						ratio: 0
					},
					{
						name: '配件作业工单',
						data: 0,
						ratio: 0
					},

				];
				const list = res.data; 
				let count = 0;
				let hasdata = false;
				for (var i = 0; i < list.length; i++) {
					if (list[i].orderCount > 0) {
						hasdata = true;
					}
					if (list[i].type == 4) {
						arr[2].data = list[i].orderCount;

						arr[2].ratio = (list[i].percentage * 100).toFixed(1);
					}
					if (list[i].type == 2) {
						arr[1].data = list[i].orderCount;
						arr[1].ratio = (list[i].percentage * 100).toFixed(1);
					}
					if (list[i].type == 1) {
						arr[0].data = list[i].orderCount;
						arr[0].ratio = (list[i].percentage * 100).toFixed(1);
					}
					count = count + Number(list[i].orderCount);
				}
				this.implementOpt.count = count;
				this.implementOpt.chartData.series = arr;
				this.implementOpt.hasData = hasdata;
				if (this.implementOpt.count > 0) {
					this.setRingChart('implementOpt');
				}
			});
		},

		// 提取表格全部数据
		setGeoupData(arr, key) {
			let list = [];
			for (let i = 0; i < arr.length; i++) {
				if (arr[i].name == '全部') {
					this[key].totals = arr[i];
				} else {
					list.push(arr[i]);
				}
			}
			this[key].groupRecords = list;
		},

		// 打开指标设置
		showKeysSelect(key) {
			const tags = this[key].typeIdx == 1 ? this[key].leaderHeadUser : this[key].leaderHead;
			this.$refs.tagSelect.init({
				tags: tags,
				key: key
			});
		},
		showSPicker(key) {
			this.$refs.sPicker.init({
				options: this.dateTypes,
				value: this[key].dateType,
				keyval: key
			});
		},

		// 切换趋势对比模式下的折线图类型
		changeLineTag(key, index) { 
			this[key].tagIdx = index;
			// 整体趋势
			this.loadOrderChartData();
		},

		// 对比名单
		changeMbs(key) {
			// lineTypeGroup:[],//选中的组
			// lineTypeMbs:[],//选中的人
			let groups = []; // 组id
			let mbs = []; // 人id
			if (this[key].lineTypeGroup.length == 0) {
				// 是否有选中的组
				for (let i = 0; i < this.memberList.length; i++) {
					groups.push(this.memberList[i].id);
				}
			} else {
				groups = JSON.parse(JSON.stringify(this[key].lineTypeGroup));
			}
			if (this[key].lineTypeMbs.length == 0) {
				// 是否有选中的人  默认显示三个
				mbs = JSON.parse(JSON.stringify(this.userList)).slice(0, 3);
			} else {
				mbs = JSON.parse(JSON.stringify(this[key].lineTypeMbs));
			}
			this.$refs.memberSelect.init({
				type: this[key].type,
				groups,
				mbs,
				key
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import './card.scss';

.border {
	border-top: 1px solid #eee;
	padding: 20rpx 40rpx;
	margin-left: -40rpx;
}

.num-block {
	width: 100%;
	display: flex;
	align-items: center;
	padding: 20rpx 0;

	.line {
		width: 2rpx;
		height: 60rpx;
		background-color: #eee;
	}

	&-item {
		flex: 1;
		text-align: center;

		.num {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}

		.name {
			font-size: 26rpx;
			padding-top: 5rpx;
			color: #999999;
			display: flex;
			justify-content: center;
			align-items: flex-start;
		}
	}
}

.msg {
	width: 30rpx;
	height: 30rpx;
	margin-left: 8rpx;
	padding-top: 5rpx;
}
</style>
